import React, { Component } from 'react'

export default class Parent extends Component {

  state = {
    hasError: false
  }

  // 生命周期函数，一旦子组件出错，就会触发
  static getDerivedStateFromError(error) {
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
  }
  render() {
    return (
      <div>
        <div>66666666666</div>
        <div>77777777777</div>
        <div>88888888888</div>
        <div>9999999999</div>
        <hr />
        {
          this.state.hasError ?  <h2>Loading.....</h2> : <Child />
        }
        
      </div>
    )
  }
}

// 当Child出现问题的时候，只是用备用的文案展示Child组建的内容，其它内容正常展示
class Child extends Component {
  state = {
    list: ""
    // list: [
    //   {id: "1", name: "qq"}, 
    //   {id: "2", name: "qq2"}, 
    //   {id: "3", name: "qq3"}, 
    //   {id: "4", name: "qq4"}
    // ]
  }
  render() {
    return (
      <div>
        {
          this.state.list.map(item => {
              return (
                <div key={item.id}>{item.name}</div>
              )
          })
        }
      </div>
    )
  }
}


